<template>
    <view>
        <view class="uni-header">
            <view class="uni-group">
                <view class="uni-title"></view>
                <view class="uni-sub-title"></view>
            </view>
            <view class="uni-group">
                <input class="uni-search" type="text" v-model="query" placeholder="请输入搜索内容" />
                <button class="uni-button" type="default" size="mini" @click="search">搜索</button>
                <button class="uni-button" type="primary" size="mini" @click="add('add')">添加任务</button>
            </view>
        </view>
        <view class="uni-container">
            <unicloud-db
                ref="udb"
                :collection="collectionName"
                :options="options"
                :where="where"
                field=""
                page-data="replace"
                :orderby="orderby"
                :getcount="true"
                :page-size="options.pageSize"
                :page-current="options.pageCurrent"
                v-slot:default="{ data, pagination, loading, error }"
            >
                <uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe>
                    <uni-tr>
                        <uni-th align="center">标题</uni-th>
                        <uni-th align="center">任务类型</uni-th>
                        <uni-th align="center">需完成任务数量</uni-th>
                        <uni-th align="center">内容</uni-th>
                        <uni-th align="center">奖励类型</uni-th>
                        <uni-th align="center">奖励数量</uni-th>
                        <uni-th align="center">是否有现金奖励机会</uni-th>
                        <uni-th width="170" align="center">创建时间</uni-th>
                        <uni-th width="204" align="center">操作</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item, index) in data" :key="index">
                        <uni-td align="center">{{ item.title }}</uni-td>
                        <uni-td align="center">{{ gettasktype(item.login) }}</uni-td>
                        <uni-td align="center">{{ item.num }}</uni-td>
                        <uni-td align="center">{{ item.count }}</uni-td>
                        <uni-td align="center">{{ item.rewardtype == 0 ? '现金' : '金币' }}</uni-td>
                        <uni-td align="center">{{ item.coin }}</uni-td>
                        <uni-td align="center">{{ item.tixian == 0 ? '无' : '有' }}</uni-td>
                        <uni-td align="center"><uni-dateformat :date="item.createtime * 1000" :threshold="[0, 0]" /></uni-td>
                        <uni-td align="center">
                            <view class="uni-group">
                                <button @click="add('change', item)" class="uni-button" size="mini" type="warn">修改</button>
                                <button @click="confirmDelete(item)" class="uni-button" size="mini" type="warn">删除</button>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
                <view class="uni-pagination-box">
                    <uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current" :total="pagination.count" @change="onPageChanged" />
                </view>
            </unicloud-db>

            <uni-popup ref="addtaskPopup" type="center">
                <view class="modal" style="width:450px; padding: 20px;">
                    <view class="uni-container">
                        <uni-forms ref="form" validateTrigger="bind">
                            <uni-forms-item label="标题" name="title" labelWidth="100">
                                <input class="uni-input-border" type="text" placeholder="标题" v-model="taskdata.title" />
                            </uni-forms-item>
                            <uni-forms-item label="需完成任务数量" name="title" labelWidth="100">
                                <input class="uni-input-border" type="number" placeholder="需完成任务数量" v-model="taskdata.num" />
                            </uni-forms-item>
                            
                            <uni-forms-item label="内容(可不填)" name="title" labelWidth="100">
                                <input class="uni-input-border" type="text" placeholder="内容" v-model="taskdata.count" />
                            </uni-forms-item>

                            <uni-forms-item label="请输入奖励数量" name="title" labelWidth="100">
                                <input class="uni-input-border" type="number" placeholder="奖励数量" v-model="taskdata.coin" />
                            </uni-forms-item>

                            <view class="main uni-padding-wrap">
                                <view class="uni-title">任务类型</view>
                                <ld-select
                                    :list="tasktypelist"
                                    label-key="label"
                                    value-key="value"
                                    placeholder="请选择"
                                    clearable
                                    v-model="taskdata.login"
                                    @change="selectChange"
                                ></ld-select>
                            </view>

                            <view class="uni-padding-wrap">
                                <view class="uni-title">类型</view>
                                <radio-group @change="radioChange">
                                    <label class="radio">
                                        <radio value="0" :checked="taskdata['rewardtype'] == 0" style="transform:scale(0.8)" />
                                        现金
                                    </label>
                                    <label class="radio">
                                        <radio value="1" :checked="taskdata['rewardtype'] == 1" style="transform:scale(0.8)" />
                                        金币
                                    </label>
                                </radio-group>
                            </view>

                            <view class="uni-padding-wrap">
                                <view class="uni-title">现金奖励机会</view>
                                <radio-group @change="radioChange1">
                                    <label class="radio">
                                        <radio value="0" :checked="taskdata['tixian'] == 0" style="transform:scale(0.8)" />
                                        没有
                                    </label>
                                    <label class="radio">
                                        <radio value="1" :checked="taskdata['tixian'] == 1" style="transform:scale(0.8)" />
                                        有
                                    </label>
                                </radio-group>
                            </view>

                            <view class="uni-button-group pointer">
                                <button class="uni-button uni-button-full" type="primary" :disabled="isLoading" @click="save">保存</button>
                            </view>
                        </uni-forms>
                    </view>
                </view>
            </uni-popup>

            <uni-popup ref="dialogpopup" type="dialog">
                <uni-popup-dialog mode="base" title="是否确认删除" :duration="2000" @close="close" @confirm="confirm"></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

<script>
import ldSelect from '@/components/ld-select/ld-select.vue';
const db = uniCloud.database();
// 表查询配置
const dbCollectionName = 'taskinfo';
const dbOrderBy = 'createtime'; // 排序字段
const dbSearchFields = ['_id', 'title', 'count']; // 支持模糊搜索的字段列表
// 分页配置
const pageSize = 10;
const pageCurrent = 1;

import { mapState } from 'vuex';
export default {
    data() {
        return {
            isLoading: false,
            query: '',
            where: 'tasktype==1',
            orderby: dbOrderBy,
            collectionName: dbCollectionName,
            options: {
                pageSize,
                pageCurrent
            },
            taskdata: {
                tasktype: 1, //0 猜歌任务   1 每日任务
                login: 0, // 0 累计猜对  1 每日登陆
                title: '', // 任务标题
                num: 0, // 需要猜对的歌曲数
                count: '', // 任务内容
                rewardtype: 1, // 奖励类型   0 现金  1金币
                coin: 0, // 奖励数量
                tixian: 0
            },
            type: 'change',
            delid: '',
            tasktypelist: [
                {
                    value: 0,
                    label: '累计猜对'
                },
                {
                    value: 1,
                    label: '每日登陆'
                },
                {
                    value: 2,
                    label: '提现'
                },
                {
                    value: 3,
                    label: '看视频'
                },
                {
                    value: 4,
                    label: '金币兑换现金'
                }
            ]
        };
    },
    computed: {
        ...mapState('user', ['userInfo'])
    },
    methods: {
        getWhere() {
            const query = this.query.trim();
            if (!query) {
                return '';
            }
            const queryRe = new RegExp(query, 'i');
            return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
        },
        search() {
            const newWhere = this.getWhere();
            const isSameWhere = newWhere === this.where;
            this.where = newWhere;
            if (isSameWhere) {
                // 相同条件时，手动强制刷新
                this.loadData();
            }
        },
        loadData(clear = true) {
            this.$refs.udb.loadData({
                clear
            });
        },
        onPageChanged(e) {
            this.$refs.udb.loadData({
                current: e.current
            });
        },
        add(type, item) {
            this.type = type;
            if (type == 'change') {
                this.taskdata = item;
            }
            this.$refs.addtaskPopup.open();
        },
        radioChange(evt) {
            this.taskdata['rewardtype'] = Number(evt.target.value);
            console.log(this.taskdata);
        },
        radioChange1(evt) {
            this.taskdata['tixian'] = Number(evt.target.value);
            console.log(this.taskdata);
        },
        confirmDelete(item) {
            this.delid = item._id;
            this.$refs.dialogpopup.open();
        },
        save() {
            if (this.taskdata['title'] == '') {
                uni.showToast({
                    title: '请输入标题',
                    duration: 2000,
                    icon: 'none'
                });
                return;
            }
            if (Number(this.taskdata['num']) <= 0) {
                uni.showToast({
                    title: '猜对歌曲数必须大于0',
                    duration: 2000,
                    icon: 'none'
                });
                return;
            }
            if (Number(this.taskdata['coin']) <= 0) {
                uni.showToast({
                    title: '奖励数量必须大于0',
                    duration: 2000,
                    icon: 'none'
                });
                return;
            }
            this.isLoading = true;
            this.taskdata['caozuo'] = this.type;
            console.log(this.taskdata);
            this.$request('admin/createtask', this.taskdata)
                .then(res => {
                    this.isLoading = false;
                    if (res.errcode != 0) {
                        uni.showToast({
                            title: res.errmsg,
                            duration: 2000,
                            icon: 'none'
                        });
                        return;
                    }
                    this.$refs.addtaskPopup.close();
                    this.loadData();
                    this.taskdata['title'] = '';
                    this.taskdata['count'] = '';
                    this.taskdata['num'] = 0;
                    this.taskdata['coin'] = 0;
                })
                .catch(err => {
                    this.isLoading = false;
                });
        },
        close() {
            this.$refs.dialogpopup.close();
        },
        confirm() {
            this.$request('admin/deltask', { id: this.delid })
                .then(res => {
                    uni.showToast({
                        title: '删除成功',
                        duration: 2000,
                        icon: 'none'
                    });
                    this.$refs.dialogpopup.close();
                    this.loadData();
                })
                .catch(err => {});
        },
        gettasktype(status) {
            if (status == 0) {
                return '累计猜歌';
            } else if (status == 1) {
                return '每日登陆';
            } else if (status == 2) {
                return '提现';
            } else if (status == 3) {
                return '看视频';
            } else if (status == 4) {
                return '金币兑换现金';
            }
        },
        selectChange(val) {
            this.taskdata.login = val;
            console.log(this.taskdata);
        }
    }
};
</script>
<style>
.modal {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background-color: #ffffff;
}

.modal-content {
    padding: 15px;
    height: 500px;
    box-sizing: border-box;
}

.password-popup {
    padding: 30px;
}
.radio {
    margin-right: 25px;
}
.uni-padding-wrap {
    overflow: hidden;
    padding-bottom: 22px;
}
.uni-title {
    font-size: 14px;
    width: 100px;
    justify-content: flex-start;
    display: flex;
    margin-right: 50px;
    float: left;
    height: 36px;
    line-height: 36px;
    color: #606266 !important;
}
uni-radio-group {
    display: flex;
    float: left;
}
</style>
